<template>
  <div class="ncontainer">
    <el-dialog
      :title="$t('add_new_approver')"
      :visible.sync="open"
      width="1200px"
      append-to-body
    >
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="4" :xs="24">
          <div class="head-container">
            <el-input
              v-model="deptName"
              :placeholder="$t('please_enter', { name: $t('department_name') })"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="20" :xs="24">
          <div style="margin-bottom: 10px" v-if="depData.deptName">
            {{ `${depData.deptName}  ${total}${$t("people")}` }}
          </div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item :label="$t('employee_name')" prop="employeeName">
              <el-input
                v-model="queryParams.employeeName"
                :placeholder="$t('please_enter', { name: $t('employee_name') })"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >{{ $t("search") }}</el-button
              >
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="userList" border :max-height="tableHeight">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column
              :label="$t('name')"
              align="center"
              key="employeeName"
              prop="employeeName"
            />
            <el-table-column
              :label="$t('position')"
              align="center"
              key="position"
              prop="position"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('mobile_phone_number')"
              align="center"
              key="phone"
              prop="phone"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('emailbox')"
              align="center"
              key="email"
              prop="email"
              :show-overflow-tooltip="true"
            />
            <el-table-column fixed="right" :label="$t('action')" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >{{ $t("select") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10,20,30,50,100, 200]"
          />
        </el-col>
      </el-row>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { deptTree } from "@/api/system/user";
import { delDept } from "@/api/system/dept";
import { listEmployee, pageListByEmployer } from "@/api/custom/employeeList";
export default {
  data() {
    return {
      open: false,
      loading: false,
      userList: [],
      depData: {},
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: undefined,
        department:null
      },
      defaultProps: {
        children: "children",
        label: "deptName",
      },
      deptName: "",
      // 部门树选项
      deptOptions: [],
      info: "",
      employerId: null,
    };
  },
  created() {
    
  },
  methods: {
    handleChangeP() {
      this.open = true;
    },
    submitForm() {
      // this.open = false
      // this.$emit('handleAddPeople',)
    },
    cancel() {
      // this.open = false
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      //this.queryParams.deptId = data.id;
      this.depData = data;
      this.queryParams.department = data.id;
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTree(this.employerId).then((response) => {
        this.deptOptions = response.data;
      });
      this.queryParams.department=null
    },
    getList(id) {
      pageListByEmployer({
       ...this.queryParams,
       employerId:this.employerId
      }).then((res) => {
        this.userList = res.data.records;
        this.total = res.data.total;
      });
    },
    handleClick(item) {
      if (!this.info) {
        let obj = {
          approveBizId: item.id,
          approveName: item.employeeName,
          type: 0,
        };
        this.$emit("handleChoosePeople", obj);
        this.open = false;
      } else {
        let obj = {
          approveBizId: item.id,
          approveName: item.employeeName,
          type: 1,
        };
        this.$emit("handleChoosePeople", obj);
        this.open = false;
      }
    },
    handleChangePA(sign, employerId) {
      this.open = true;
      this.info = sign;
      this.employerId = employerId;
      this.getDeptTree();
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.ncontainer {
  .pbig {
    display: flex;
    justify-content: space-between;

    .pbig-left {
      width: 30%;
      border: 1px solid red;
    }

    .pbig-right {
      width: 69%;
    }
  }
}
</style>
